<template>
  <div class="payment">
   <div class="payment-header">
       <router-link to="/shopping-car" tag="span">
          <van-icon name="arrow-left" />
        </router-link>
      <span>支付</span>
      <span></span>
    </div>
    <div class="payment-footer">
        <van-submit-bar :price="3050" button-text="支付" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { SubmitBar } from 'vant';

Vue.use(SubmitBar);
export default {

}
</script>

<style lang="stylus" scoped>
 .payment 
    background-color #f2f2f2
    height 100%
    .payment-header
        width 100%
        height .88rem
        font-size .3rem
        background-color #fff
        display flex 
        justify-content space-between
        align-items center
    .payment-footer 
        position fixed 
        bottom 0
        .van-submit-bar__text 
            display flex
            button
                width 1.4rem !important
</style>
<style lang="css" scoped>
 .van-submit-bar__text {
  display: flex;    
 }
</style>